<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <page-tools :show-before="true">
        <!-- 前面内容 -->
        <template v-slot:before
          >有 {{ attendInfo.tobeTaskCount }} 条考勤审批尚未处理</template
        >
        <template v-slot:after>
          <el-button size="mini" type="danger">导入</el-button>
          <el-button size="mini" type="warning">提醒</el-button>
          <el-button size="mini" type="primary">设置</el-button>
          <el-button size="mini" type="default">历史归档</el-button>
          <el-button size="mini" type="primary">{{ yearMonth }}报表</el-button>
        </template>
      </page-tools>
      <el-card class="hr-block">
        <el-form
          ref="formData"
          :model="formData"
          label-width="120px"
          class="formInfo"
        >
          <el-form-item label="部门:">
            <el-checkbox-group v-model="formData.deptID">
              <el-checkbox
                v-for="item in departments"
                :key="item.id"
                :label="item.name"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="考勤状态：">
            <el-radio-group v-model="formData.stateID">
              <el-radio
                v-for="item in stateData.holidayType"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 考勤数据 -->
      <el-card class="hr-block">
        <!-- 考勤列表 -->
        <div
          style="width:100%;position: relative;overflow-x: auto; overflow-y: hidden;"
        >
          <div style="width: 3000px;">
            <table
              border="0"
              align="center"
              cellpadding="0"
              cellspacing="0"
              class="tableInfo"
            >
              <tr>
                <th width="50">序号</th>
                <th width="100">姓名</th>
                <th width="100">工号</th>
                <th width="200">部门</th>
                <th width="100">手机</th>
                <th v-for="(it, ind) in monthOfReport" :key="ind" width="110">
                  {{ attendInfo.month }}/{{ ind + 1 }}
                </th>
              </tr>
              <tr v-for="(item, index) in list" :key="item.id">
                <td width="50">{{ index }}</td>
                <td width="100">{{ item.username }}</td>
                <td width="100">{{ item.workNumber }}</td>
                <td width="200">{{ item.departmentName }}</td>
                <td width="100">{{ item.mobile }}</td>
                <td
                  v-for="(it, ind) in item.attendanceRecord"
                  :key="ind"
                  width="110"
                  @click="showChangeDialog(item, ind, it)"
                >
                  <span v-if="it.adtStatu === 1">√</span>
                  <span v-if="it.adtStatu === 2">旷工</span>
                  <span v-if="it.adtStatu === 3">迟到</span>
                  <span v-if="it.adtStatu === 4">早退</span>
                  <span v-if="it.adtStatu === 5">外出</span>
                  <span v-if="it.adtStatu === 6">出差</span>
                  <span v-if="it.adtStatu === 7">年假</span>
                  <span v-if="it.adtStatu === 8">事假</span>
                  <span v-if="it.adtStatu === 9">病假</span>
                  <span v-if="it.adtStatu === 10">婚假</span>
                  <span v-if="it.adtStatu === 11">丧假</span>
                  <span v-if="it.adtStatu === 12">产假</span>
                  <span v-if="it.adtStatu === 13">奖励产假</span>
                  <span v-if="it.adtStatu === 14">陪产假</span>
                  <span v-if="it.adtStatu === 15">探亲假</span>
                  <span v-if="it.adtStatu === 16">工伤假</span>
                  <span v-if="it.adtStatu === 17">调休</span>
                  <span v-if="it.adtStatu === 18">产检假</span>
                  <span v-if="it.adtStatu === 19">流产假2</span>
                  <span v-if="it.adtStatu === 20">长期病假</span>
                  <span v-if="it.adtStatu === 21">测试架</span>
                  <span v-if="it.adtStatu === 22">补签</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <el-dialog :visible.sync="centerDialogVisible" width="30%" center>
          <span slot="title" style="color:#fff;"
            >{{ attendInfo.name }} {{ attendInfo.month }}/{{
              attendInfo.getDate
            }}（实际工作日考勤方案）</span
          >
          <div class="attenInfo">
            <p class="colRed">注：统计考勤时，异常状态优先正常状态</p>
            <p class="check">
              <el-radio-group v-model="modifyData.adtStatu">
                <el-radio
                  v-for="item in stateData.vacationtype"
                  :key="item.id"
                  :label="item.id"
                  :value="item.name"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </p>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="btnOK">确定</el-button>
            <el-button @click="centerDialogVisible = false">取消</el-button>
          </span>
        </el-dialog>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          align="middle"
          justify="center"
          style="height: 60px"
        >
          <el-pagination
            :page-size="page.pagesize"
            :current-page="page.page"
            layout="prev, pager, next"
            :total="page.total"
            @current-change="pageChange"
          />
        </el-row>
      </el-card>
    </div>
    <el-card>
      <!-- 提醒组件 -->
      <el-dialog
        title="提醒"
        :visible.sync="tipsDialogVisible"
        width="280px"
        center
      >
        <div class="attenInfo">
          <p>
            系统将通过邮件与短信的形式，对全体员工中存在旷工的考勤进行提醒，该提醒每月仅可发送
            1 次。
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSub">我知道了</el-button>
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
      <!-- 设置组件 -->
      <!-- <attendance-set ref="set" @handleCloseModal="handleCloseModal" -->
      /></el-card
    >
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getAttendancesList, updateAttendance } from '@/api/attendances'
import attendanceApi from '@/model/others/attendance'
import { getDepartmentAPI } from '@/api/departments'

@Component({ name: 'Attendances' })
export default class extends Vue {
  list = []
  selectData = []
  stateData = attendanceApi
  departments = []
  total = 100
  attendanceRecord = ''
  monthOfReport = ''
  centerDialogVisible = false
  tipsDialogVisible = false
  month = ''
  yearMonth = ''
  loading = false
  attendInfo = {
    month: '',
    getDate: '',
    getInfo: '',
    name: '',
    counts: '',
    tobeTaskCount: ''
  }

  formData = {
    page: 1,
    pagesize: 10,
    keyword: '' /* this.keyword */,
    deptID: [], // 性别
    stateID: ''
  }

  page = {
    page: 1,
    pagesize: 10,
    total: 0
  }

  modifyData = {
    userId: '',
    day: '',
    adtStatu: ''
  }

  // 创建完毕状态
  created() {
    this.getAttendancesList() // 获取考勤列表
    this.getDepartments() // 获取考勤列表
  }

  // 暂时不处理
  handleSub() {
    this.tipsDialogVisible = false
    this.$message.success('提醒成功')
  }

  handleTip() {
    this.tipsDialogVisible = true
  }

  // 设置
  handleSet() {
    (this.$refs.set as any).dialogFormV()
  }

  // 弹框关闭
  handleCloseModal() {
    (this.$refs.set as any).dialogFormH()
  }

  // 获取组织列表
  async getDepartments() {
    const { depts } = await getDepartmentAPI()
    this.departments = depts
  }

  // 初始化数据
  async getAttendancesList() {
    this.loading = true
    const { data, monthOfReport, tobeTaskCount } = await getAttendancesList({
      ...this.page
    })
    this.list = data.rows // 当前记录
    this.page.total = data.total // 总条数
    this.attendInfo.counts = data.total
    this.attendInfo.month = monthOfReport
    this.attendInfo.tobeTaskCount = tobeTaskCount

    const date = new Date()
    const year = date.getFullYear()
    const month = monthOfReport
    const d = new Date(year, month, 0) // 获取月份
    ;(this.monthOfReport as any) = d.getDate() // 获取日期
    this.yearMonth = year + (('' as any) + month < 10 ? '0' + month : month)
    this.month = monthOfReport
    this.loading = false
  }

  // 确定修改
  async btnOK() {
    await updateAttendance(this.modifyData)
    this.centerDialogVisible = false
    this.getAttendancesList() // 成功之后 重新拉取数据
  }

  // 页码改变
  pageChange(page: number) {
    this.page.page = page
    this.getAttendancesList() // 获取数据
  }

  showChangeDialog(item: any, id: string, it: any) {
    this.modifyData.userId = item.id
    this.modifyData.day = it.day
    ;(this.modifyData as any).departmentId = item.departmentId
    this.modifyData.adtStatu = it.adtStatu + '' // 数字转成字符串

    if (it.adtStatu !== '') {
      (this.attendInfo as any).getDate = parseInt(id + 1)
      this.attendInfo.getInfo = it.adtStatu
      this.attendInfo.name = item.name
      this.centerDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
